<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<script src="js/jquery.js"></script>
	<script>
		$(() => {
			/*No cache for css*/
			$('link.cssLink').each((index, element) => {
				let url = $(element).attr('href');
				url += '?rand=' + Math.random();
				$(element).attr('href', url);
			});
			
			/*Auto completion function*/
			$('#searchInput').on('keydown', (e) => {
				let keyword = $(e.target).val();
				let requestData = 'keyword=' + keyword;
				console.log(requestData);
				$.ajax({
					url: 'Search',
					method: 'GET',
					accept: 'application/json',
					data: requestData,
					success: (productList, status) => {
						let dataList = $('#autoCompletion');
						/*Clear the origin datalist*/
						dataList.children().remove();
						productList.forEach((element, index) => {
							/*Max number of auto completion is 10
                            Although this should be done in server*/
							const MAX_NUMBER_OF_COMPLETION = 10;
							if (index < MAX_NUMBER_OF_COMPLETION) {
								dataList.append('<option class="autocomplete-option" value="' + element.name + '">' + element.name + '</option>');
							}
						});
						
					}
				});
			});
			
		});
	</script>
	<link class="cssLink" href="css/jpetstore.css" media="screen"
		  rel="StyleSheet" type="text/css"/>
	<link href="css/icono.min.css" rel="stylesheet" type="text/css">
	<link class="cssLink" href="css/mycss.css" rel="stylesheet" type="text/css">
	<meta content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org"
		  name="generator"/>
	<title>MyPetStore</title>
	<meta charset="UTF-8">
	<meta content="text/html; charset=UTF-8"
		  http-equiv="Content-Type"/>
	<meta content="max-age=0" http-equiv="Cache-Control"/>
	<meta content="no-cache" http-equiv="Cache-Control"/>
	<meta content="0" http-equiv="expires"/>
	<meta content="Tue, 01 Jan 1980 1:00:00 GMT" http-equiv="Expires"/>
	<meta content="no-cache" http-equiv="Pragma"/>
</head>
<body>
<div th:include="common/top.html::top"></div>
<div id="content">
	<div id="BackLink">
		<a href="Main">Return to Main Menu</a>
	</div>
	
	<div id="Catalog">
		<h2>Order Detail</h2>
		<table>
			<tbody>
			<tr>
				<th align="center" colspan="2" th:text="'Order ID: '+${orderDetail.orderId}">Order ID: 114514</th>
			</tr>
			<tr>
				<th align="center" colspan="2" th:text="'Order Date: '+${orderDetail.orderDate}">Order Date:
					1145/19/19
				</th>
			</tr>
			<tr>
				<th colspan="2">Payment Details</th>
			</tr>
			<tr>
				<td>Card Type:</td>
				<td th:text="${orderDetail.cardType}">Default Cart Type</td>
			</tr>
			<tr>
				<td>Card Number:</td>
				<td th:text="${orderDetail.creditCard}">Card Number</td>
			</tr>
			<tr>
				<td>Expiry Date (MM/YYYY):</td>
				<td th:text="${orderDetail.expiryDate}">Expiry Date</td>
			</tr>
			<tr>
				<th colspan="2">Billing Address</th>
			</tr>
			<tr>
				<td>First name:</td>
				<td th:text="${orderDetail.billToFirstName}">Firs tName</td>
			</tr>
			<tr>
				<td>Last name:</td>
				<td th:text="${orderDetail.billToLastName}">Last tName</td>
			</tr>
			<tr>
				<td>Address 1:</td>
				<td th:text="${orderDetail.billAddress}">Bill Address</td>
			</tr>
			<tr>
				<td>City:</td>
				<td th:text="${orderDetail.billCity}"></td>
			</tr>
			<tr>
				<td>State:</td>
				<td th:text="${orderDetail.billState}"></td>
			</tr>
			<tr>
				<td>Zip:</td>
				<td th:text="${orderDetail.billZip}"></td>
			</tr>
			<tr>
				<td>Country:</td>
				<td th:text="${orderDetail.billCountry}"></td>
			</tr>
			<tr>
				<th colspan="2">Shipping Address</th>
			</tr>
			<tr>
				<td>First name:</td>
				<td th:text="${orderDetail.shipToFirstName}"></td>
			</tr>
			<tr>
				<td>Last name:</td>
				<td th:text="${orderDetail.shipToLastName}"></td>
			</tr>
			<tr>
				<td>Address 1:</td>
				<td th:text="${orderDetail.shipAddress}"></td>
			</tr>
			<tr>
				<td>City:</td>
				<td th:text="${orderDetail.shipCity}"></td>
			</tr>
			<tr>
				<td>State:</td>
				<td th:text="${orderDetail.shipState}"></td>
			</tr>
			<tr>
				<td>Zip:</td>
				<td th:text="${orderDetail.shipZip}"></td>
			</tr>
			<tr>
				<td>Country:</td>
				<td th:text="${orderDetail.shipCountry}"></td>
			</tr>
			<tr>
				<td>Courier:</td>
				<td th:text="${orderDetail.courier}"></td>
			</tr>
			<tr>
				<td>Status:</td>
				<td th:text="${orderDetail.status}"></td>
				<td th:if="${orderDetail.status == 0}"><a th:href="'pay/'+${orderDetail.orderId}">Pay</a></td>
			</tr>
			<tr>
				<td colspan="2">
					<table>
						<tbody>
						<tr>
							<th>Item ID</th>
							<th>Description</th>
							<th>Quantity</th>
							<th>Price</th>
							<th>Total Cost</th>
						</tr>
						<tr th:each="lineItem : ${orderDetail.lineItems}">
							<td><a href="Item?itemID=itemId" th:href="'Item?itemID='+${lineItem.itemId}"
								   th:text="${lineItem.itemId}">114514</a>
							</td>
							<!--							TODO 这里如何获得product的description-->
							<td th:utext="${lineItem.item.product.description}">图片</td>
							<td th:text="${lineItem.quantity}"></td>
							<td th:text="'$'+${lineItem.listPrice}"></td>
							<td th:text="'$'+${lineItem.total}"></td>
						</tr>
						
						<tr>
							<th colspan="5" th:text="'$'+${orderDetail.totalPrice}"></th>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			
			</tbody>
		</table>
	
	</div>
</div>
<div th:include="common/bottom.html::bottom"></div>
</body>
</html>
	